<template>
  <div class="repair-service">
    <van-nav-bar
      title="汽修服务"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div v-model="form">
    <div class="form-item">
      <span class="form-item-span">选择报修问题：</span><br><br>
      <el-select  v-model="form.repairIssue1" placeholder="请选择">
        <el-option label="请选择" value=""></el-option>
        <el-option label="日常维护保养" value="日常维护保养 "></el-option>
        <el-option label="故障报修" value="故障报修"></el-option>
        <el-option label="电路" value="电路"></el-option>
        <el-option label="轮胎" value="轮胎"></el-option>
        <el-option label="电焊" value="电焊"></el-option>
        <el-option label="其他" value="其他"></el-option>
      </el-select>
      <el-select style="margin-top: 20px" v-model="form.repairIssue2" placeholder="请选择">
        <el-option label="请选择" value=""></el-option>
        <el-option label="发动机" value="发动机"></el-option>
        <el-option label="底盘" value="底盘"></el-option>
      </el-select>
    </div>
    <div class="form-item">
<!--      <van-uploader v-model="fileList" multiple />-->
      <el-upload
        class="avatar-uploader"
        action="api/imageUpload/files"
        :show-file-list="false"
        name="file"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 200px;height: 200px">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div class="form-item">
      <span>请描述问题</span>
      <el-input type="textarea" :maxlength="200" v-model="form.description" />
    </div>
    <div class="form-item">
      <span>维修方式：</span>
      <el-select v-model="form.repairMethod" placeholder="请选择">
        <el-option label="上门维修" value="上门维修"></el-option>
        <el-option label="到店维修" value="到店维修"></el-option>
      </el-select>
    </div>
    <div class="form-item">
      <span>联系方式：</span>
      <el-input v-model="form.personalName" placeholder="请输入个人姓名" />
      <el-input v-model="form.phone" placeholder="请输入电话" />
      <el-input v-model="form.carModel" placeholder="请输入车型" />
    </div>
    </div>
    <div style="margin: 16px;">
      <van-button round block type="info" @click="addOrder" native-type="submit">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { Uploader } from "vant";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import Vue from "vue";
import axios from "axios";

Vue.use(ElementUI);
Vue.use(Uploader);

export default {
  data() {
    return {
      imageList: [],
      form: {
        id:"",
        orderNumber:"",
        createTime:"",
        onSitePaymentTime:"",
        workOrderPaymentTime:"",
        myIdentity:"",
        repairIssue1:"",
        repairIssue2:"",
        picture:"",
        description:"",
        repairMethod:"",
        personalName:"",
        repairStatus:""
      },
      imageUrl: '',
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // // Uploader 根据文件后缀来判断是否为图片文件
        // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
    };
  },
  created() {
    this.form.myIdentity = localStorage.getItem("role");
    this.form.repairStatus = "汽修"
  },
  methods: {
    // 添加订单
    addOrder() {
      this.form.orderNumber=Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;
      // 判重
      this.$axios.get("carorder/findByOrderNumber/"+this.form.orderNumber).then((res) => {
        console.log(res)
        if (res.data.message === "SUCCESS"){
          this.$axios.post("carorder/save", this.form).then((res) => {
            console.log(res);
            console.log('*****************')
            if (res.data.message === "SUCCESS") {
              this.$router.push({ path: "/problemSubmitSuccess" });
            } else {
              this.$message.error('添加失败！');
            }
          });
        }else {
          this.addOrder()
        }
      });

    },
    onClickLeft(){
      this.$router.go(-1)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }
};
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.repair-service {
  padding: 20px;
}
.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.form-item {
  margin-bottom: 20px;
}
.form-item-span{
  display: block;
  float: left;
}
.image-upload {
  display: flex;
}
</style>
